<template>
  <div v-loading="loading">
    <div class="panel">
      <div class="panel-header">{{ this.$route.meta.title || '--' }}</div>
      <div class="form-wrapper">
        <div class="form-content">
          <i-form
            :layoutSpan="24"
            loading="false"
            :labelWidth="20"
            :inline="true"
            :breakpoint="[
              [768, 1],
              [992, 2],
              [1200, 2],
              [1920, 3],
              [Infinity, 4],
            ]"
            :items="handleFormItemInline"
            :model="form"
            class="iform"
          >
          </i-form>
          <div class="btn-wrapper">
            <el-button
              type="success"
              icon="el-icon-search"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-refresh"
              @click="handleReset"
              >重置</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-header">已选电站</div>
      <div class="relation-station-card-panel">
        <template v-if="selectedList.length < 1">
          <StationCard type="none" defaultText="暂无已选择电站" />
        </template>
        <template
          v-else
          v-for="(item, index) in selectedList.filter((item) =>
            filterSelectedKeys !== ''
              ? item.stationName.indexOf(filterSelectedKeys) > -1
              : true
          )"
        >
          <StationCard
            :key="index"
            :item="item"
            type="show"
            :checked="true"
            @clickItem="
              () => {
                handleDeleteItem(item, index)
              }
            "
          />
        </template>
      </div>
      <div class="panel-header">可选电站</div>
      <div class="relation-station-card-panel">
        <template
          v-for="(item, index) in selectableList.filter((item) =>
            filterSelectableKeys !== ''
              ? item.stationName.indexOf(filterSelectableKeys) > -1
              : true
          )"
        >
          <StationCard
            :key="index"
            :item="item"
            type="show"
            :checked="false"
            @clickItem="
              () => {
                handleAddItem(item, index)
              }
            "
          />
        </template>
      </div>
    </div>
    <div class="panel-btn-wrapper">
      <el-button type="primary" @click="handleSubmitStation"> 保存 </el-button>
      <el-button type="warning" @click="handleResetStation"> 重置 </el-button>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash'
import StationCard from './components/StationCard'
import {
  listAllStaffDontHaveStations,
  listAllStaffHadStations,
  resetStaffHadStations,
} from '@/api/user'

export default {
  name: 'RelationStation',
  components: { StationCard },
  mounted() {
    this.getLists()
  },
  data() {
    return {
      loading: false,
      form: {},
      selectedList: [],
      selectableList: [],
      originSelectedList: [],
      originSelectableList: [],
      filterSelectedKeys: '',
      filterSelectableKeys: '',
      formItemsInline: [
        {
          type: 'text',
          clearable: true,
          value: 'selectedStationName',
          placeHolder: '请输入已选择电站名',
        },
        {
          type: 'text',
          clearable: true,
          value: 'selectableStationName',
          placeHolder: '请输入未选择电站名',
        },
      ],
    }
  },
  computed: {
    // selectStations() {
    //   return this.testArr.filter((item) => {
    //     return item.checked
    //   })
    // },
    // noSelectStaions() {
    //   return this.testArr.filter((item) => {
    //     return !item.checked
    //   })
    // },
    resourceSet() {
      return this.$store.getters.resourceSet
    },
    handleFormItemInline() {
      return this.formItemsInline.filter((column) => {
        return (
          !column.resourceId || this.resourceSet.includes(column.resourceId)
        )
      })
    },
  },
  methods: {
    async getLists() {
      let staffUserId = this.$route.params.id
      try {
        this.loading = true
        let dontHaveRes = await listAllStaffDontHaveStations({ staffUserId })
        let hadRes = await listAllStaffHadStations({ staffUserId })

        console.log(dontHaveRes)
        console.log(hadRes)

        this.originSelectedList = hadRes
        this.originSelectableList = dontHaveRes

        this.selectedList = cloneDeep(this.originSelectedList)
        this.selectableList = cloneDeep(this.originSelectableList)
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    },
    async handleSubmitStation() {
      // resetStaffHadStations({
      //   staffUserId: this.$route.params.id
      // })
      // .then(() => {
      //   this.$message({
      //     showClose: true,
      //     message: '保存成功',
      //     type: 'success'
      //   })
      // })
      // .catch(err => {
      //   console.log(err)
      // })
      this.loading = true
      try {
        let res = await resetStaffHadStations({
          staffUserId: this.$route.params.id,
          stationIds: this.selectedList.map((item) => item.id),
        })
        if (!res) return
        this.$message({
          message: '保存成功',
          type: 'success',
          showClose: true,
        })
        this.getLists()

        this.$router.push('/user/staffList')
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    },
    handleResetStation() {
      this.form = {}
      this.filterSelectedKeys = ''
      this.filterSelectableKeys = ''
      this.selectedList = cloneDeep(this.originSelectedList)
      this.selectableList = cloneDeep(this.originSelectableList)
    },
    handleReset() {
      this.form = {}
      this.filterSelectedKeys = ''
      this.filterSelectableKeys = ''
    },
    handleSearch() {
      this.filterSelectedKeys = this.form.selectedStationName || ''
      this.filterSelectableKeys = this.form.selectableStationName || ''
    },
    handleAddItem(item, index) {
      this.selectableList.splice(index, 1)
      this.selectedList.push({
        ...item,
      })
    },
    handleDeleteItem(item, index) {
      this.selectedList.splice(index, 1)
      this.selectableList.push({
        ...item,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.form-wrapper {
  background: #fff;
  .form-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .iform {
    flex: 1;
    margin-left: 16px;
  }
  .btn-wrapper {
    min-width: 130px;
    margin: 0 24px;
    .dash-control {
      cursor: pointer;
      margin: 0 5px;
      display: inline-block;
    }
  }
}

.relation-station-card-panel {
  display: flex;
  flex-wrap: wrap;

  padding: 0 10px;

  div {
    margin: 10px;
  }
}
</style>
